<template>
  <div>
    <div class="sw">
      <!--    轮播图-->
      <van-swipe  :autoplay="4000" class="swiper"  >
        <van-swipe-item @click="goPage(item.articleId)" v-for="(item, index) in swiperList" :key="index">
          <p class="swiperText">{{item.title}}</p>
          <img class="swiperImg" v-lazy="item.bannerImgUrl" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import {getSwiperList} from "@/api/index-api";

export default {
  name: "Swiper",
  data(){
    return{
      swiperList:null,
    }
  },
  methods:{
    getSwiperList(){
      getSwiperList().then(({code,rows})=>{
        // console.log(code);
        console.log(rows);
        if(code === 0){
          this.swiperList = rows;
        }
      })
    },
    goPage(articleId){
      console.log(articleId)

      this.$router.push({
        path:'NewDetails',
        query:{articleId}
      })
    }
  },
  created(){
    this.getSwiperList()
  }
}
</script>

<style scoped>
.swiperImg{
  width:100%;
  height:220px;
}
.sw{
  background-color:#eee;
  /*margin-top:5px;*/
  /*width:100%;*/
}
.swiper{
  display:flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  position:relative;
}
.swiperText{
  /*white-space: nowrap;*/
  /*overflow: hidden;*/
  /*text-overflow: ellipsis;*/
  font-size:20px;
  margin:5px 0 0 0;
  position:absolute;
  bottom:20px;
  left:0;
  color:white;
  text-align: center;
  z-index:1001;
}
.swiperImg{

}
</style>